<template>
  <div>
    <el-row>
      <el-form
        :inline="true"
        :model="formData"
        ref="formData"
        label-width="140px"
        class="demo-formData"
      >
        <el-form-item label="学科名称">
          <el-select
            @change="changeSubject"
            v-model="questionQueryList.subject_id"
            size="small"
            placeholder="请选择学科"
            clearable
          >
            <el-option
              v-for="item in formData.subject"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称">
          <el-select
            @change="changeDirectory"
            v-model="questionQueryList.directory_id"
            size="small"
            placeholder="请选择目录"
            clearable
          >
            <el-option
              v-for="item in formData.directory"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称">
          <el-select
            v-model="questionQueryList.tag_id"
            size="small"
            clearable
            placeholder="请选择标签"
          >
            <el-option
              v-for="item in formData.tag"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select
            v-model="questionQueryList.quest_type"
            size="small"
            clearable
            placeholder="请选择题型"
          >
            <el-option
              v-for="item in formData.type"
              :key="item.state"
              :label="item.label"
              :value="item.state"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select
            v-model="questionQueryList.check_state"
            size="small"
            placeholder="请选择审核状态"
            clearable
          >
            <el-option
              v-for="item in formData.check"
              :key="item.state"
              :label="item.label"
              :value="item.state"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-select
            v-model="questionQueryList.show_state"
            size="small"
            clearable
            placeholder="请选择发布状态"
          >
            <el-option
              v-for="item in formData.show"
              :key="item.state"
              :label="item.label"
              :value="item.state"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建者">
          <el-input
            size="small"
            clearable
            v-model="questionQueryList.create_name"
            placeholder="请输入创建者"
          ></el-input>
        </el-form-item>
        <el-form-item label="试题难度">
          <el-select
            v-model="questionQueryList.difficulty"
            size="small"
            clearable
            placeholder="请选择难度"
          >
            <el-option
              v-for="item in formData.difficult"
              :key="item.state"
              :label="item.label"
              :value="item.state"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否真题">
          <el-select
            v-model="questionQueryList.is_true_question"
            size="small"
            placeholder="请选择是否真题"
            clearable
          >
            <el-option
              v-for="item in formData.true"
              :key="item.state"
              :label="item.label"
              :value="item.state"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="formData.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            style="width: 220px"
            @change="chooseTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left: 400px">
          <el-button
            type="primary"
            size="small"
            @click="$emit('updateList', questionQueryList)"
            >查询</el-button
          >
          <el-button @click="reset" size="small">重置</el-button>
          <el-button
            type="warning"
            size="small"
            icon="el-icon-folder-add"
            @click="$emit('changeType')"
            plain
          ></el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { getSubjectApi } from "@/api/question";
export default {
  name: "questionForm",
  data() {
    return {
      questionQueryList: {
        page: 1,
        limit: 10,
        subject_id: "",
        directory_id: "",
        tag_id: "",
        difficulty: "",
        quest_type: "",
        is_true_question: "",
        show_state: "",
        // 审核状态
        check_state: "",
        create_name: "",
        create_time: "",
      },

      formData: {
        subject: [],
        directory: [],
        tag: [],
        type: [
          { label: "单选题", state: 1 },
          { label: "多选题", state: 2 },
          { label: "判断题", state: 3 },
          { label: "简答题", state: 4 },
        ],
        check: [
          { label: "待审核", state: 1 },
          { label: "审核通过", state: 2 },
          { label: "不通过", state: 3 },
        ],
        show: [
          { label: "上架", state: 1 },
          { label: "下架", state: 2 },
        ],
        difficult: [
          { label: "简单", state: 1 },
          { label: "中等", state: 2 },
          { label: "较难", state: 3 },
        ],
        true: [
          { label: "是", state: 1 },
          { label: "否", state: 2 },
        ],
        time: [],
      },
    };
  },
  methods: {
    reset() {
      console.log(111);
      this.questionQueryList = {
        page: 1,
        limit: 10,
        subject_id: "",
        directory_id: "",
        tag_id: "",
        difficulty: "",
        quest_type: "",
        is_true_question: "",
        show_state: "",
        // 审核状态
        check_state: "",
        create_name: "",
        create_time: "",
      };
      this.$emit("updateList", this.questionQueryList);
    },
    // 获取学科
    async getSubject() {
      let res = await getSubjectApi();
      // console.log(res);
      this.formData.subject = res;
    },
    // 获取目录
    async changeSubject() {
      this.questionQueryList.directory_id = "";
      this.questionQueryList.tag_id = "";
      if (!this.questionQueryList.subject_id) {
        return;
      }

      this.formData.directory = this.formData.subject.filter(
        (item) => item.id === this.questionQueryList.subject_id
      )[0].children;
    },
    // 获取标签
    async changeDirectory() {
      this.questionQueryList.tag_id = "";
      if (!this.questionQueryList.directory_id) {
        return;
      }

      this.formData.tag = this.formData.directory.filter(
        (item) => item.id === this.questionQueryList.directory_id
      )[0].children;
    },
    chooseTime() {
      if (this.formData.time === null) return (this.formData.time = []);
      this.questionQueryList.create_time =
        new Date(this.formData.time[0]).getTime() +
        "," +
        new Date(this.formData.time[1]).getTime();
    },
  },
  created() {
    this.getSubject();
  },
};
</script>
<style></style>
